<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
  <!-- 
    公共：animate__animated 
    效果：animate__fadeInLeft
   -->
   <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .demo{
      margin: 0 auto;
      width: 1200px;
    }
    .box{
      width: 100%;
      height: 1200px;
    }
    li{
      margin: 20px 0;
      width: 100%;
      height: 150px;
      background-color: skyblue;
      line-height: 150px;
      text-align: center;
      font-size: 30px;
      color: #fff;
    }
    
   </style>
</head>
<body>
  <div class="demo">
    <div class="box"></div>
    <ul>
      <li class="animate__animated">第1个li</li>
      <li class="animate__animated">第2个li</li>
      <li class="animate__animated">第3个li</li>
      <li class="animate__animated">第4个li</li>
      <li class="animate__animated">第5个li</li>
      <li class="animate__animated">第6个li</li>
      <li class="animate__animated">第7个li</li>
      <li class="animate__animated">第8个li</li>
      <li class="animate__animated">第9个li</li>
      <li class="animate__animated">第10个li</li>
      <li class="animate__animated">第11个li</li>
      <li class="animate__animated">第12个li</li>
      <li class="animate__animated">第13个li</li>
      <li class="animate__animated">第14个li</li>
      <li class="animate__animated">第15个li</li>
      <li class="animate__animated">第16个li</li>
      <li class="animate__animated">第17个li</li>
      <li class="animate__animated">第18个li</li>
      <li class="animate__animated">第19个li</li>
      <li class="animate__animated">第20个li</li>
      <li class="animate__animated">第21个li</li>
      <li class="animate__animated">第22个li</li>
      <li class="animate__animated">第23个li</li>
      <li class="animate__animated">第24个li</li>
      <li class="animate__animated">第25个li</li>
      <li class="animate__animated">第26个li</li>
      <li class="animate__animated">第27个li</li>
      <li class="animate__animated">第28个li</li>
      <li class="animate__animated">第29个li</li>
      <li class="animate__animated">第30个li</li>
      <li class="animate__animated">第31个li</li>
      <li class="animate__animated">第32个li</li>
      <li class="animate__animated">第33个li</li>
      <li class="animate__animated">第34个li</li>
      <li class="animate__animated">第35个li</li>
      <li class="animate__animated">第36个li</li>
      <li class="animate__animated">第37个li</li>
      <li class="animate__animated">第38个li</li>
      <li class="animate__animated">第39个li</li>
      <li class="animate__animated">第40个li</li>
      <li class="animate__animated">第41个li</li>
      <li class="animate__animated">第42个li</li>
      <li class="animate__animated">第43个li</li>
      <li class="animate__animated">第44个li</li>
      <li class="animate__animated">第45个li</li>
      <li class="animate__animated">第46个li</li>
      <li class="animate__animated">第47个li</li>
      <li class="animate__animated">第48个li</li>
      <li class="animate__animated">第49个li</li>
      <li class="animate__animated">第50个li</li>
      <li class="animate__animated">第51个li</li>
      <li class="animate__animated">第52个li</li>
      <li class="animate__animated">第53个li</li>
      <li class="animate__animated">第54个li</li>
      <li class="animate__animated">第55个li</li>
      <li class="animate__animated">第56个li</li>
      <li class="animate__animated">第57个li</li>
      <li class="animate__animated">第58个li</li>
      <li class="animate__animated">第59个li</li>
      <li class="animate__animated">第60个li</li>
      <li class="animate__animated">第61个li</li>
      <li class="animate__animated">第62个li</li>
      <li class="animate__animated">第63个li</li>
      <li class="animate__animated">第64个li</li>
      <li class="animate__animated">第65个li</li>
      <li class="animate__animated">第66个li</li>
      <li class="animate__animated">第67个li</li>
      <li class="animate__animated">第68个li</li>
      <li class="animate__animated">第69个li</li>
      <li class="animate__animated">第70个li</li>
      <li class="animate__animated">第71个li</li>
      <li class="animate__animated">第72个li</li>
      <li class="animate__animated">第73个li</li>
      <li class="animate__animated">第74个li</li>
      <li class="animate__animated">第75个li</li>
      <li class="animate__animated">第76个li</li>
      <li class="animate__animated">第77个li</li>
      <li class="animate__animated">第78个li</li>
      <li class="animate__animated">第79个li</li>
      <li class="animate__animated">第80个li</li>
      <li class="animate__animated">第81个li</li>
      <li class="animate__animated">第82个li</li>
      <li class="animate__animated">第83个li</li>
      <li class="animate__animated">第84个li</li>
      <li class="animate__animated">第85个li</li>
      <li class="animate__animated">第86个li</li>
      <li class="animate__animated">第87个li</li>
      <li class="animate__animated">第88个li</li>
      <li class="animate__animated">第89个li</li>
      <li class="animate__animated">第90个li</li>
      <li class="animate__animated">第91个li</li>
      <li class="animate__animated">第92个li</li>
      <li class="animate__animated">第93个li</li>
      <li class="animate__animated">第94个li</li>
      <li class="animate__animated">第95个li</li>
      <li class="animate__animated">第96个li</li>
      <li class="animate__animated">第97个li</li>
      <li class="animate__animated">第98个li</li>
      <li class="animate__animated">第99个li</li>
      <li class="animate__animated">第100个li</li>
      <li class="animate__animated">第101个li</li>
      <li class="animate__animated">第102个li</li>
      <li class="animate__animated">第103个li</li>
      <li class="animate__animated">第104个li</li>
      <li class="animate__animated">第105个li</li>
      <li class="animate__animated">第106个li</li>
      <li class="animate__animated">第107个li</li>
      <li class="animate__animated">第108个li</li>
      <li class="animate__animated">第109个li</li>
      <li class="animate__animated">第110个li</li>
      <li class="animate__animated">第111个li</li>
      <li class="animate__animated">第112个li</li>
      <li class="animate__animated">第113个li</li>
      <li class="animate__animated">第114个li</li>
      <li class="animate__animated">第115个li</li>
      <li class="animate__animated">第116个li</li>
      <li class="animate__animated">第117个li</li>
      <li class="animate__animated">第118个li</li>
      <li class="animate__animated">第119个li</li>
      <li class="animate__animated">第120个li</li>
      <li class="animate__animated">第121个li</li>
      <li class="animate__animated">第122个li</li>
      <li class="animate__animated">第123个li</li>
      <li class="animate__animated">第124个li</li>
      <li class="animate__animated">第125个li</li>
      <li class="animate__animated">第126个li</li>
      <li class="animate__animated">第127个li</li>
      <li class="animate__animated">第128个li</li>
      <li class="animate__animated">第129个li</li>
      <li class="animate__animated">第130个li</li>
      <li class="animate__animated">第131个li</li>
      <li class="animate__animated">第132个li</li>
      <li class="animate__animated">第133个li</li>
      <li class="animate__animated">第134个li</li>
      <li class="animate__animated">第135个li</li>
      <li class="animate__animated">第136个li</li>
      <li class="animate__animated">第137个li</li>
      <li class="animate__animated">第138个li</li>
      <li class="animate__animated">第139个li</li>
      <li class="animate__animated">第140个li</li>
      <li class="animate__animated">第141个li</li>
      <li class="animate__animated">第142个li</li>
      <li class="animate__animated">第143个li</li>
      <li class="animate__animated">第144个li</li>
      <li class="animate__animated">第145个li</li>
      <li class="animate__animated">第146个li</li>
      <li class="animate__animated">第147个li</li>
      <li class="animate__animated">第148个li</li>
      <li class="animate__animated">第149个li</li>
      <li class="animate__animated">第150个li</li>
      <li class="animate__animated">第151个li</li>
      <li class="animate__animated">第152个li</li>
      <li class="animate__animated">第153个li</li>
      <li class="animate__animated">第154个li</li>
      <li class="animate__animated">第155个li</li>
      <li class="animate__animated">第156个li</li>
      <li class="animate__animated">第157个li</li>
      <li class="animate__animated">第158个li</li>
      <li class="animate__animated">第159个li</li>
      <li class="animate__animated">第160个li</li>
      <li class="animate__animated">第161个li</li>
      <li class="animate__animated">第162个li</li>
      <li class="animate__animated">第163个li</li>
      <li class="animate__animated">第164个li</li>
      <li class="animate__animated">第165个li</li>
      <li class="animate__animated">第166个li</li>
      <li class="animate__animated">第167个li</li>
      <li class="animate__animated">第168个li</li>
      <li class="animate__animated">第169个li</li>
      <li class="animate__animated">第170个li</li>
      <li class="animate__animated">第171个li</li>
      <li class="animate__animated">第172个li</li>
      <li class="animate__animated">第173个li</li>
      <li class="animate__animated">第174个li</li>
      <li class="animate__animated">第175个li</li>
      <li class="animate__animated">第176个li</li>
      <li class="animate__animated">第177个li</li>
      <li class="animate__animated">第178个li</li>
      <li class="animate__animated">第179个li</li>
      <li class="animate__animated">第180个li</li>
      <li class="animate__animated">第181个li</li>
      <li class="animate__animated">第182个li</li>
      <li class="animate__animated">第183个li</li>
      <li class="animate__animated">第184个li</li>
      <li class="animate__animated">第185个li</li>
      <li class="animate__animated">第186个li</li>
      <li class="animate__animated">第187个li</li>
      <li class="animate__animated">第188个li</li>
      <li class="animate__animated">第189个li</li>
      <li class="animate__animated">第190个li</li>
      <li class="animate__animated">第191个li</li>
      <li class="animate__animated">第192个li</li>
      <li class="animate__animated">第193个li</li>
      <li class="animate__animated">第194个li</li>
      <li class="animate__animated">第195个li</li>
      <li class="animate__animated">第196个li</li>
      <li class="animate__animated">第197个li</li>
      <li class="animate__animated">第198个li</li>
      <li class="animate__animated">第199个li</li>
      <li class="animate__animated">第200个li</li>
    </ul>
  </div>

  <script>
    // 获取li元素
    let lis = document.querySelectorAll('li');

    // 监听鼠标滚动
    window.onscroll = function(){
      // 获取当前页面高度
      let scrollValue = document.documentElement.scrollTop;

      for(let i = 0; i < lis.length; i++){
        // 获取盒子(li)距离浏览器顶部的高度
        // let h = lis[10].offsetTop;  当盒子完全消失，高度 = scroll
        // 获取li到浏览器可视区域底部的位置
        let h = lis[i].offsetTop - document.documentElement.clientHeight +10;  // 10为浏览器可视区域底部向上的+10px 开始动画
        console.log(h,scrollValue);
        if(scrollValue > h){
          lis[i].classList.add('animate__fadeInLeft');
        }else{
          lis[i].classList.remove('animate__fadeInLeft');
        }

      }

      






    }











  </script>


  
</body>
</html>